import hljs from 'highlight.js/lib/core';
import xml from 'highlight.js/lib/languages/xml';
import json from 'highlight.js/lib/languages/json';
import java from 'highlight.js/lib/languages/java';
import javascript from 'highlight.js/lib/languages/javascript';
import sql from 'highlight.js/lib/languages/sql';

// Register the languages
hljs.registerLanguage('xml', xml);
hljs.registerLanguage('html', xml);
hljs.registerLanguage('vue', xml);
hljs.registerLanguage('json', json);
hljs.registerLanguage('java', java);
hljs.registerLanguage('javascript', javascript);
hljs.registerLanguage('sql', sql);

// Vue plugin for highlight.js
export const vuePlugin = {
  install(Vue) {
    // Register a global custom directive called v-highlight
    Vue.directive('highlight', {
      // When the bound element is inserted into the DOM...
      inserted: function(el) {
        // Look for a <code> tag
        const blocks = el.querySelectorAll('pre code');
        
        // Highlight each block
        blocks.forEach((block) => {
          hljs.highlightBlock(block);
        });
      },
      // When text content is updated
      componentUpdated: function(el) {
        // Look for a <code> tag
        const blocks = el.querySelectorAll('pre code');
        
        // Highlight each block
        blocks.forEach((block) => {
          hljs.highlightBlock(block);
        });
      }
    });
  }
};

export default hljs;
